<!--logo and logo icon start-->
<div class="logo dark-logo-bg hidden-xs hidden-sm">
    <a href="index.html">
        <!--<img src="img/logo-icon.png" alt="">-->
        <!--<i class="fa fa-maxcdn"></i>-->
        <span class="brand-name">OurNews</span>
    </a>
</div>

<div class="icon-logo dark-logo-bg hidden-xs hidden-sm">
    <a href="index.html">
        <!--<img src="img/logo-icon.png" alt="">-->
        <!--<i class="fa fa-maxcdn"></i>-->
    </a>
</div>
<!--logo and logo icon end-->

<!--toggle button start-->
<a class="toggle-btn hidden-lg hidden-md"><i class="fa fa-outdent"></i></a>
<!--toggle button end-->

<!--mega menu start-->
<!--<div id="navbar-collapse-1" class="navbar-collapse collapse yamm mega-menu">-->
    <!--<ul class="nav navbar-nav">-->
        <!--&lt;!&ndash; Classic list &ndash;&gt;-->
        <!--<li class="dropdown"><a href="javascript:;" data-toggle="dropdown" class="dropdown-toggle">Mega <b-->
                <!--class=" fa fa-angle-down"></b></a>-->
            <!--<ul class="dropdown-menu wide-full">-->
                <!--<li>-->
                    <!--&lt;!&ndash; Content container to add padding &ndash;&gt;-->
                    <!--<div class="yamm-content">-->
                        <!--<div class="row">-->
                            <!--<ul class="col-sm-2 list-unstyled">-->
                                <!--<li>-->
                                    <!--<p class="title">Standard</p>-->
                                <!--</li>-->
                                <!--<li><a href="javascript:;"> Slick Mega Navigation </a>-->
                                <!--</li>-->
                                <!--<li><a href="javascript:;"> Built in BS3+</a>-->
                                <!--</li>-->
                                <!--<li><a href="javascript:;"> Full Customizable </a>-->
                                <!--</li>-->
                                <!--<li><a href="javascript:;"> Huge Components </a>-->
                                <!--</li>-->
                                <!--<li><a href="javascript:;"> Tons of widgets </a>-->
                                <!--</li>-->
                                <!--<li><a href="javascript:;"> Fontawesome </a>-->
                                <!--</li>-->
                            <!--</ul>-->
                            <!--<ul class="col-sm-2 list-unstyled">-->
                                <!--<li>-->
                                    <!--<p class="title">Description</p>-->
                                <!--</li>-->
                                <!--<li>-->
                                    <!--<a href="javascript:;">-->
                                        <!--<span class="d-title">2015 Mordern Design</span>-->
                                        <!--<span class="d-desk">Description goes here</span>-->
                                    <!--</a>-->
                                <!--</li>-->
                                <!--<li>-->
                                    <!--<a href="javascript:;">-->
                                        <!--<span class="d-title">Amaging Dashboard</span>-->
                                        <!--<span class="d-desk">Build with BS3</span>-->
                                    <!--</a>-->
                                <!--</li>-->
                                <!--<li>-->
                                    <!--<a href="javascript:;">-->
                                        <!--<span class="d-title">3500+ Satisfied Client</span>-->
                                        <!--<span class="d-desk">Max 5 star rating</span>-->
                                    <!--</a>-->
                                <!--</li>-->
                                <!--<li>-->
                                    <!--<a href="javascript:;">-->
                                        <!--<span class="d-title">Easy to Cutomize</span>-->
                                        <!--<span class="d-desk">Very easy to use</span>-->
                                    <!--</a>-->
                                <!--</li>-->

                            <!--</ul>-->
                            <!--<ul class="col-sm-2 list-unstyled">-->
                                <!--<li>-->
                                    <!--<p class="title">Iconic</p>-->
                                <!--</li>-->
                                <!--<li><a href="javascript:;"><i class="fa fa-anchor text-muted"></i> Anchor Icon </a>-->
                                <!--</li>-->
                                <!--<li><a href="javascript:;"><i class="fa fa-desktop text-muted"></i> Desktop Icon </a>-->
                                <!--</li>-->
                                <!--<li><a href="javascript:;"><i class="fa fa-laptop text-muted"></i> Laptop Icon</a>-->
                                <!--</li>-->
                                <!--<li><a href="javascript:;"><i class="fa fa-automobile text-muted"></i> Automobile Icon </a>-->
                                <!--</li>-->
                                <!--<li><a href="javascript:;"><i class="fa fa-briefcase text-muted"></i> Briefcase Icon</a>-->
                                <!--</li>-->
                            <!--</ul>-->
                            <!--<ul class="col-sm-3 list-unstyled">-->
                                <!--<li>-->
                                    <!--<p class="title">Image + Description</p>-->
                                <!--</li>-->
                                <!--<li>-->
                                    <!--<a href="javascript:;">-->
                                        <!--<img class="icon-img" src="img/mega-menu/mega_icon1.png" alt="" />-->
                                        <!--<span class="icon-desk">-->
                                                                                        <!--<span class="d-title">Full Flat Concept</span>-->
                                                                <!--<span class="d-desk">Description goes here</span>-->
                                                                <!--</span>-->
                                    <!--</a>-->
                                <!--</li>-->
                                <!--<li>-->
                                    <!--<a href="javascript:;">-->
                                        <!--<img class="icon-img" src="img/mega-menu/mega_icon2.png" alt="" />-->
                                        <!--<span class="icon-desk">-->
                                                                                        <!--<span class="d-title">Amaging Dashboard</span>-->
                                                                <!--<span class="d-desk">Build with BS3</span>-->
                                                                <!--</span>-->
                                    <!--</a>-->
                                <!--</li>-->
                                <!--<li>-->
                                    <!--<a href="javascript:;">-->
                                        <!--<img class="icon-img" src="img/mega-menu/mega_icon3.png" alt="" />-->
                                        <!--<span class="icon-desk">-->
                                                                                        <!--<span class="d-title">3500+ Satisfied Client</span>-->
                                                                <!--<span class="d-desk">Max 5 star rating</span>-->
                                                                <!--</span>-->
                                    <!--</a>-->
                                <!--</li>-->
                                <!--<li>-->
                                    <!--<a href="javascript:;">-->
                                        <!--<img class="icon-img" src="img/mega-menu/mega_icon4.png" alt="" />-->
                                        <!--<span class="icon-desk">-->
                                                                                        <!--<span class="d-title">Easy to Cutomize</span>-->
                                                                <!--<span class="d-desk">Very easy to use</span>-->
                                                                <!--</span>-->
                                    <!--</a>-->
                                <!--</li>-->

                            <!--</ul>-->
                            <!--<ul class="col-sm-3 list-unstyled custom-nav-img">-->
                                <!--<li>-->
                                    <!--<p class="title">Custom</p>-->
                                <!--</li>-->
                                <!--<li>-->

                                    <!--<p class="desk">Ipsum dolor sit amet, consectetur adipisicing elit.-->
                                        <!--Asperiores aut, autem commodi cumque illum pariatur-->
                                        <!--vero. Ad adipisci animi delectus</p>-->
                                <!--</li>-->
                                <!--<li><span class="mega-bg"></span></li>-->
                            <!--</ul>-->

                        <!--</div>-->
                    <!--</div>-->
                <!--</li>-->
            <!--</ul>-->
        <!--</li>-->

        <!--&lt;!&ndash; Classic dropdown &ndash;&gt;-->
        <!--<li class="dropdown"><a href="javascript:;" data-toggle="dropdown" class="dropdown-toggle"> English  <b-->
                <!--class=" fa fa-angle-down"></b></a>-->
            <!--<ul role="menu" class="dropdown-menu language-switch">-->
                <!--<li>-->
                    <!--<a tabindex="-1" href="javascript:;"><span> German </span><img src="img/flags/germany_flag.jpg" alt=""/></a>-->
                <!--</li>-->
                <!--<li>-->
                    <!--<a tabindex="-1" href="javascript:;"><span> Italian </span> <img src="img/flags/italy_flag.jpg" alt=""/></a>-->
                <!--</li>-->
                <!--<li>-->
                    <!--<a tabindex="-1" href="javascript:;"><span> French </span> <img src="img/flags/french_flag.jpg" alt=""/></a>-->
                <!--</li>-->
                <!--<li>-->
                    <!--<a tabindex="-1" href="javascript:;"><span> Spanish </span> <img src="img/flags/spain_flag.jpg" alt=""/></a>-->
                <!--</li>-->
                <!--<li>-->
                    <!--<a tabindex="-1" href="javascript:;"><span> Russian </span> <img src="img/flags/russia_flag.jpg" alt=""/></a>-->
                <!--</li>-->
            <!--</ul>-->
        <!--</li>-->

    <!--</ul>-->
<!--</div>-->
<!--mega menu end-->
<div class="notification-wrap">
    <!--left notification start-->

    <!--left notification end-->


    <!--right notification start-->
    <div class="right-notification">
        <ul class="notification-menu">
            <li>
                <form class="search-content" action="index.html" method="post">
                    <input type="text" class="form-control" name="keyword" placeholder="Search...">
                </form>
            </li>

            <li>
                <a href="javascript:;" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                    <img id="userPhoto" src="public/img/ourNewsImg/user-logo.jpeg" alt=""><%= this.model.get('nick_name') %>
                    <span class=" fa fa-angle-down"></span>
                </a>
                <ul class="dropdown-menu dropdown-usermenu purple pull-right">
                    <li>
                        <a href="#personalInformation">
                            <span>个人中心</span>
                        </a>
                    </li>
                    <li><a id="exit" href=""><i class="fa fa-sign-out pull-right"></i>退出</a></li>
                </ul>
            </li>


        </ul>
    </div>
    <!--right notification end-->
</div>